<template>
    <div class="detailsBox" :key="data._id">
        <van-nav-bar :title="data.shopName" left-text="返回" left-arrow>
            <template #left>
                <van-icon name="arrow-left" size="20" @click="$router.back()" style="margin-right: 10px" />
                <van-icon name="wap-home-o" size="20" @click="goto('/home')" />
            </template>
        </van-nav-bar>

        <van-swipe :autoplay="3000">
            <van-swipe-item>
                <van-image :src="data.mainImage" />
            </van-swipe-item>
        </van-swipe>
        <div class="price">
            <p>
                ￥{{ data.price / 100 }}
                <span>已售{{ data.saleQuantity }}台</span>
            </p>
            <p>降价提醒</p>
        </div>
        <div class="goods_name">{{ data.name }}</div>
        <div class="tip" v-html="data.advertise"></div>
        <div class="popup">
            <van-cell is-link>已选 {{ this.value }}件</van-cell>

            <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
                <div class="choose_goods">
                    <div class="top">
                        <div class="img">
                            <van-image :src="data.mainImage" width="100" height="100" />
                        </div>
                        <div class="info">
                            <p>￥{{ data.price / 100 }}</p>
                            <p>库存：有货</p>
                            <p>已选择 {{ this.value }}件</p>
                        </div>
                    </div>
                    <div class="center">
                        <span>数量</span>
                        <van-stepper v-model="value" theme="round" button-size="22" disable-input />
                    </div>
                    <van-button type="danger" size="large" @click="soon">立即抢购</van-button>
                </div>
            </van-popup>
            <van-goods-action>
                <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
                <van-goods-action-icon icon="cart-o" :badge="cartlist.length" text="购物车" @click="goto('/cart')" />
                <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
                <van-goods-action-button type="warning" text="加入购物车" @click="add2cart" />
                <van-goods-action-button type="danger" text="立即购买" @click='buyNow' />
            </van-goods-action>

        </div>

    </div>
</template>
<script>
    export default {
        name: "Goodsdetails",
        data() {
            // let cartlist = JSON.parse(localStorage.getItem("cartlist")) || [];
            return {
                data: {},
                show: false,
                value: 1,
                // cartlist,
                id: this.$router.params,
            };
        },
        mounted() {

            this.$parent.showTabbar = false;
        },
        destroyed() {
            this.$parent.showTabbar = true;
        },
        created() {
            const { id } = this.$route.params;
            console.log("aa", id);
            this.getData(id);
        },
    
        computed: {
            cartlist() {
                // return this.$store.state.cartlist;
                return this.$store.state.cart.cartlist;
            }
        },
        watch: {
            "$route.params.id": function (nid) {
                this.getData(nid);
                this.$parent.showTabbar = false;
            },
        },
        methods: {
            buyNow() {
                this.show = true;

               
            },
            soon() {
                this.show = false;
                this.add2cart();
                this.$router.push('/cart')
            },
           
            async getData(id) {
                const { data } = await this.$request.post("goods/goodsitem", {
                    id: id,
                });
                this.data = data.ret;
                console.log(data);
            },
            goto(url) {
                this.$router.push(url);
                console.log(111);
            },
            add2cart() {
                // 判断当前商品是否存在购物车中
                // 存在：数量+1
                // 不存在：添加
                const current = this.cartlist.find((item) => item.id == this.data.id);
                if (current) {
                    // current.qty++;
                    this.$store.commit('changeQty', { id: current.id, qty: current.qty + this.value })
                } else {
                    const { id, name, price, mainImage } = this.data;
                    this.$store.commit('addToCart', { id, name, price, mainImage, qty: this.value })
                }
                // if (current) {
                //     current.qty++;
                // } else {
                //     const { id, name, price, mainImage } = this.data;
                //     this.cartlist.unshift({
                //         id,
                //         name,
                //         price,
                //         mainImage,
                //         qty: this.value,
                //     });
                // }

                // 更新本地存储
                // localStorage.setItem("cartlist", JSON.stringify(this.cartlist));
                this.$toast("成功添加商品，可前往购物车查看");
            },
        },
    };
</script>
<style scoped>
    .price {
        padding: 0px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .price p:nth-child(1) {
        font-size: 20px;
        color: red;
    }

    .price p:nth-child(1) span {
        color: rgb(121, 100, 100);
        font-size: 12px;
    }

    .price p:nth-child(2) {
        width: 50px;
        padding: 3px;
        font-size: 12px;
        color: gray;
        background-color: rgb(231, 218, 218);
    }

    .goods_name {
        padding: 0px 10px;
    }

    .tip {
        margin-top: 5px;
        padding: 0px 10px;
        font-size: 12px;
        color: gray;
    }

    .popup {
        margin-top: 10px;
        margin-bottom: 100px;
    }

    .choose_goods {
        padding: 30px 30px 0px 15px;
        display: flex;
        flex-direction: column;
    }

    .choose_goods .top {
        display: flex;
        margin-bottom: 5px;
    }

    .choose_goods .center {
        margin-bottom: 15px;
        display: flex;
        justify-content: space-between;
    }

    .info p:nth-child(1) {
        color: red;
    }

    .info p:nth-child(2) {
        color: gray;
    }

    .info p {
        padding-left: 5px;
        font-size: 12px;
    }
</style>